<template>
  <div class="container">
      <div class="mdui-divider-inset"></div>
      <el-alert
        class="info"
        title="欢迎使用疫苗接种管理系统"
        type="success"
        center
        show-icon>
      </el-alert>
       <el-alert
       class="info"
        title="如何接种疫苗"
        type="info"
        description="请按照下列接种步骤，按顺序操作"
        show-icon>
      </el-alert>
      <el-steps
        class="step"
        :active='this.$store.state.step'
        finish-status="success">
        <el-step title="接种须知"></el-step>
        <el-step title="接种时间"></el-step>
        <el-step title="如何接种"></el-step>
        <el-step title="注意事项"></el-step>
      </el-steps>
      
      <!-- <router-view class="Step-main"/> -->
      <StepMain
        v-show="!finish"
        class="Step-main"
        :title="stepMsg.title"
        :body="stepMsg.body"
      ></StepMain>
      <div 
        class="step-btn"
        v-show="!finish"
        >
        <el-button 
          style="margin-top: 12px;"
          @click="pre">上一步</el-button>
        <el-button 
          style="margin-top: 12px;" 
          @click="next">下一步</el-button>
      </div>
      <Tick
        class="Step-main"
        v-show="finish"
      ></Tick>
  </div>
</template>

<script>
import StepMain from '../components/StepMain'
import Tick from '../components/Tick'

export default {
  data () {
    return {
      stepMsg: {
        title: "",
        body: ""
      },
      finish: false
    }
  },
  methods: {
    next () {
      if (this.$store.state.step === 3){
        console.log('over')
        this.finish = true
        this.$store.state.step++
        return
      }else{
        this.finish = false
      }
      if (this.$store.state.step < 4){
        this.$store.state.step++
        this.getData()
      }
    },
    pre () {
      if (this.$store.state.step > 0){
        console.log(this.$store.state.step)
        this.$store.state.step--
        this.getData()
      }
    },
    async getData () {
      let url = `http://127.0.0.1:5000/${this.$store.state.step}`
      const data = await this.$axios.get(url)
      this.stepMsg = data.data
    }
  },
  mounted () {
    this.getData()
  },
  components: {
    StepMain,
    Tick
  }
}
</script>

<style lang="less" scoped>
div{
  margin: 0;
  padding: 0;
}
.container{
    width: 70vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    // text-align: center;
    .info {
      width: 50vw;
      margin: 5px 0;
    }
    .step{
      // width: 60vw;
      margin-top: 15px;
      width: 80%;
    }
    .Step-main {
      margin-top: 25px;
      // border: 1px solid #333;
      width: 80%;
      padding: 15px 10px 35px;
    }
}
</style>